<template>
  <div>
    <van-cell
      icon="search"
      v-for="(itms, index) in gaoliangspan"
      :key="index"
      :finished="finished"
      v-model="loading"
      finished-text="没有更多了"
      @load="onLoad"
      @click="$emit('update-keywodrds', dataList[index])"
    >
      <template #title>
        <span v-html="itms"></span>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { debounce } from 'lodash'
import { seatchApi } from '@/api'
export default {
  computed: {
    gaoliangspan() {
      const src = new RegExp(this.keword, 'ig')
      return this.dataList.map((res) => {
        return res.replace(
          src,
          (match) => `<span style="color:red">${match}</span>`
        )
      })
    }
  },
  name: 'setchS',
  data() {
    return {
      dataList: [],
      finished: false,
      loading: false
    }
  },
  props: {
    keword: {
      type: String,
      require: true
    }
  },
  watch: {
    keword: {
      //字符串写方法在 handler里面
      handler: 'seatch',
      immediate: true
    }
  },
  methods: {
    seatch: debounce(async function () {
      const { data } = await seatchApi(this.keword)
      this.dataList = data.data.options.filter(Boolean)
    }, 300)
  },
  async onLoad() {
    const { data } = await seatchApi(this.keword)
    this.dataList.push(data.data.options.filter(Boolean))
    if (data.data.results.length === 0) {
      this.finished = true
    }
    this.loading = false
  }
}
</script>

<style></style>
